<!DOCTYPE html>
<html>
<head>
    <title>电子书商城</title>
</head>
<body class="bgf6">

<style>
    .explain_box {
        padding: 8px 0 0 5px;
        border-top: 1px dashed #dbdbdb;
    }
</style>

<div id="payForm"></div>

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">


                        <div>
                            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                                <el-form :model="form">
                                    <el-form-item label="收货人" :label-width="formLabelWidth">
                                        <el-input v-model="form.realName" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="手机" :label-width="formLabelWidth">
                                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="省" :label-width="formLabelWidth">
                                        <el-select v-model="form.province" placeholder="请选择省" @change="changeProvinceHandler">
                                            <el-option :label="province.areaname" :value="province.areacode" v-for="province in provinces" ></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="市" :label-width="formLabelWidth">
                                        <el-select v-model="form.city" placeholder="请选择市" @change="changeCityHandler">
                                            <el-option :label="city.areaname" :value="city.areacode" v-for="city in citys"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="区" :label-width="formLabelWidth">
                                        <el-select v-model="form.area" placeholder="请选择区">
                                            <el-option :label="area.areaname" :value="area.areacode" v-for="area in areas"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="详细地址" :label-width="formLabelWidth">
                                        <el-input v-model="form.detail" autocomplete="off"></el-input>
                                    </el-form-item>

                                    <el-form-item label="默认" :label-width="formLabelWidth">
                                        <el-radio-group v-model="form.defaultAddr">
                                            <el-radio :label="1">是</el-radio>
                                            <el-radio :label="2">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="saveAddress">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>


                        <div>
                            <div style="margin: 20px 10px">
                                <el-tag>收货地址</el-tag>
                                <span style="float: right" @click="showCreateAddress">新增收货地址</span>
                            </div>

                            <div>
                                <el-radio-group v-model="selAddress">
                                    <el-radio :label="addr.addressId" v-for="addr in myAddress">
                                        {{addr.realName}}  {{addr.provinceValue}}{{addr.cityValue}}{{addr.areaValue}}{{addr.detail}} {{addr.phone}}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                        </div>

                        <div style="margin: 20px 10px">
                            <div style="margin: 10px 10px"><el-tag type="success">支付方式</el-tag></div>
                            <el-radio-group v-model="payChannel">
                                <el-radio label="1000">支付宝</el-radio>
                                <el-radio label="1001">ATM银行卡</el-radio>
                            </el-radio-group>
                        </div>

                        <div style="margin: 20px 10px">
                            <div style="margin: 10px 10px"><el-tag type="success">送货清单</el-tag></div>
                            <div>
                                <el-table
                                        :data="cartInfos"
                                        style="width: 100%">
                                    <el-table-column
                                            label="商品图片"
                                            width="180">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.picUrl" style="width: 80px;height: 80px">
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="commoName"
                                            label="商品名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="price"
                                            label="单价">
                                    </el-table-column>
                                    <el-table-column
                                            prop="buyNum"
                                            label="数量">
                                    </el-table-column>
                                </el-table>
                            </div>

                        </div>

                        <div style="margin-top: 20px;height: 30px">
                            <div style="float: right">
                                <span >应付总金额:</span> <span style="color: #e4393c;font-size: 18px;font-weight: 700;font-family: Verdana">￥{{totalAmount}}</span>
                            </div>
                        </div>


                        <div style="margin-top: 20px;height: 30px">
                            <div style="float: right">
                                <el-button type="danger" plain @click="submitOrder">提交订单</el-button>
                            </div>
                        </div>




                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">

    var commoId = '[[${commodityId}]]';

    var ebookVue = new Vue({
        el : '#app',
        data : {
            cartInfos : [],
            payChannel : '',
            selAddress : '',
            myAddress : [],
            dialogFormVisible : false,
            formLabelWidth: '120px',
            provinces : [],
            citys : [],
            areas : [],
            form: {
                realName: '',
                phone: '',
                province: '',
                city: '',
                area: '',
                detail: '',
                defaultAddr: ''
            },
        },
        created : function () {
            loadProvince();
            loadMyAddress();
            loadCartInfo();
        },
        computed : {
            totalAmount : function () {
                let total = 0;
                for (let i=0; i<this.cartInfos.length; i++) {
                    let cartInfo = this.cartInfos[i];
                    total += cartInfo.buyNum * cartInfo.price;
                }
                return total;
            }
        },
        methods : {
            submitOrder : function() {
                let that = this;
                dayuanit.ajax('/order/createOrder', {
                    payChannel : that.payChannel,
                    addressId : that.selAddress
                }, function (result) {
                    alert(result.data);
                    $('#payForm').html(result.data);
                })
            },
            saveAddress : function() {
                let that = this;
                dayuanit.ajax('/order/saveAddress', {
                    realName : this.form.realName,
                    phone : this.form.phone,
                    province : this.form.province,
                    city : this.form.city,
                    area : this.form.area,
                    detail : this.form.detail,
                    defaultAddr : this.form.defaultAddr
                }, function (result) {
                    that.dialogFormVisible = false;
                })
            },
            showCreateAddress : function () {
                this.dialogFormVisible = true;
            },
            changeProvinceHandler : function (areaCode) {
                for (let i=0; i<this.provinces.length; i++) {
                    let province = this.provinces[i];
                    if (province.areacode == areaCode) {
                        this.areas = [];
                        this.city = [];
                        loadCity(province.areaid);
                        break;
                    }
                }
            },
            changeCityHandler : function (areaCode) {
                for (let i=0; i<this.citys.length; i++) {
                    let city = this.citys[i];
                    if (city.areacode == areaCode) {
                        loadArea(city.areaid);
                        break;
                    }
                }
            }
        }
    });

    function loadCartInfo() {
        dayuanit.ajax("/order/loadCartInfo", {}, function (result) {
            ebookVue.cartInfos = result.data;
        })
    }

    function loadMyAddress() {
        dayuanit.ajax('/order/loadMyAddress',{}, function (result) {
            ebookVue.myAddress = result.data;
        })
    }

    function loadProvince() {
        dayuanit.ajax('/order/loadArea', {
            level : 1,
            parentId : -1
        }, function (result) {
            ebookVue .provinces = result.data;
        })
    }

    function loadCity(parentId) {
        dayuanit.ajax('/order/loadArea', {
            level : 2,
            parentId : parentId
        }, function (result) {
            ebookVue .citys = result.data;
        })
    }

    function loadArea(parentId) {
        dayuanit.ajax('/order/loadArea', {
            level : 3,
            parentId : parentId
        }, function (result) {
            ebookVue .areas = result.data;
        })
    }


</script>

</body>
</html>
